<template>
<div>
    <h1>房型录入</h1>
    <table class="table">
        <tr>
            <td>房型名称</td>
            <td><input type="text" v-model="data.houseName"></td>
        </tr>

        <tr>
            <td>门市价</td>
            <td><input type="text" v-model="data.money"></td>
        </tr>

        <tr>
            <td>可住人数</td>
            <td><input type="text" v-model="data.count"></td>
        </tr>

        <tr>
            <td>房型大小</td>
            <td><input type="text" v-model="data.big"></td>
        </tr>

        <tr>
            <td>房型图片</td>
            <td><input type="file" @change="upfile"></td>
        </tr>

        <tr>
            <td>房型介绍</td>
            <td><input type="text" v-model="data.maessage"></td>
        </tr>

        <tr>
            <td></td>
            <td><input type="button" value="添加" @click="Add()"></td>
        </tr>

    </table>
</div>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter()

const data=ref({
  "id": 0,
  "zhangHao": "",
  "password": "",
  "houseName": "",
  "money": 0,
  "count": 0,
  "big": 0,
  "img": "",
  "maessage": ""
})


const Add=()=>{
    if(data.value.houseName==""){
        alert("房型名称不能为空值");
        return
    }

    axios.post("/api/House/Add",data.value).then(res=>{
        if(res.data>0){
            alert("添加成功");
            router.push("/Show")
        }else{
            alert("添加失败");
        }
    })
}

const upfile=(e:any)=>{
    var f=e.target.files[0];
    var fd=new FormData();
    fd.append("file",f)

    if(f.type!="image/jpeg"&&f.type!="image/png"){
        alert("格式不正确")
        return;
    }

    if(f.size>2*1024*1024){
        alert("大小不能超过2MB")
        return;
    }

    axios.post("/api/House/Img",fd).then(res=>{
        data.value.img=res.data
    })
}
        
</script>

<style lang="scss" scoped>

</style>